<template>
  <div class="recordDetail">
    <Navbar :appTitle="$route.meta.title" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">编号：{{ detailInfo.goodsCode }}</div>
          <div class="row">
            提交时间：<span style="color:#191f25">{{
              detailInfo.createTime || "--"
            }}</span>
          </div>
          <div class="row">
            提交人：<span style="color:#191f25">{{
              detailInfo.createByText || "--"
            }}</span>
          </div>
          <div class="status">{{ detailInfo.statusText }}</div>
        </div>
        <!-- ids="WMS_GOODS" -->
        <imgStatus :flowStatus="detailInfo.flowStatus"></imgStatus>
      </div>
    </div>
    <!-- 基本信息 -->
    <div class="otherTaps">
      <div class="title">
        <span class="icon"></span>
        <span class="content">基本信息</span>
      </div>
      <div class="content">
        <div class="row">
          <span class="r-label">物品名称：</span>
          <span class="r-column">{{ detailInfo.goodsName || "--" }} </span>
        </div>
        <div class="row">
          <span class="r-label">规格：</span>
          <span class="r-column">{{ detailInfo.spec || "--" }} </span>
        </div>
        <div class="row">
          <span class="r-label">类型：</span>
          <span class="r-column">{{ detailInfo.typeText || "--" }}</span>
        </div>
        <div class="row">
          <span class="r-label">分类：</span>
          <span class="r-column">{{ detailInfo.categoryText || "--" }}</span>
        </div>
        <div class="row">
          <span class="r-label" style="min-width:1.35rem"
            >基本单位/生产单位：</span
          >
          <span class="r-column">{{ detailInfo.basicUnitText || "--" }}</span>
        </div>
      </div>
    </div>
    <!-- 辅助单位 -->
    <div
      class="otherTaps"
      v-for="(item, index) in detailInfo.goodsAssistUnitList"
      :key="index"
    >
      <div class="title">
        <span class="icon"></span>
        <span class="content">辅助单位（{{ index + 1 }}）</span>
      </div>
      <div class="content">
        <div class="row">
          <span class="r-label">辅助单位：</span>
          <span class="r-column">{{ item.assistUnitText || "--" }}</span>
        </div>
        <div class="row">
          <span class="r-label" style="white-space: nowrap"
            >一辅助单位等于多少基本单位：</span
          >
          <span class="r-column">{{ item.conversionRate || "--" }}</span>
        </div>
        <div
          v-if="
            detailInfo.goodsAssistUnitList.indexOf(item) + 1 !==
              detailInfo.goodsAssistUnitList.length
          "
          class="bottomLine"
        ></div>
      </div>
    </div>
    <!-- 采购 -->
    <div class="otherTaps">
      <div class="title">
        <span class="icon"></span>
        <span class="content">采购</span>
      </div>
      <div class="row" style="margin-top: 0.16rem">
        <span class="r-label">预留采购时长（天）：</span>
        <span class="r-column">{{
          detailInfo.estimatePurchaseTime || "--"
        }}</span>
      </div>
    </div>
    <!-- 审批流程 -->
    <div v-if="detailInfo.flowInstId" style="margin-top: 0.1rem">
      <!-- ids="WMS_GOODS" -->
      <Examine type="2" :id="detailInfo.flowInstId" ref="examine" />
    </div>
    <div class="ExamineBottom"></div>
    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { APILX } from "@/api/requestLx";
import imgStatus from "@/components/imgStatus/imgStatus";
import Examine from "@/components/examine";
import { getEnableOne } from "@/api/api";
import upload from "@/components/upload/upload";
export default {
  name: "goodsManagementDetail", //物品详情
  components: { Navbar, upload, Examine, imgStatus },
  data() {
    return {
      detailInfo: {},
      shows: false, //是否开启了审批
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail();
    // 判断是否从审批过来
    this.isApproval();
    this.getEnableOne();
  },
  methods: {
    //   判断是否开启审批
    getEnableOne() {
      getEnableOne({ id: "WMS_GOODS", type: "add" }).then((res) => {
        if (res.result && res.result == "false") {
          this.shows = false;
          this.tabsNum -= 1;
        } else {
          this.shows = true;
        }
      });
    },
    isApproval() {
      if (localStorage.getItem("approval") === "success") {
        let paramsObj = {
          applyType: "waiterDeal",
        };
        let pathUrl = "/waiterApply";
        this.$router.push({
          path: pathUrl,
          query: paramsObj,
        });
      }
      localStorage.removeItem("approval");
    },
    getDetail() {
      let id = this.$route.query.id;
      APILX.goodsQueryById(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result;
        } else {
          this.$toast(res.message);
        }
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recordDetail {
  height: 100vh;
  //   overflow-y: scroll;
  .d-head {
    width: 100%;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    background: #ffffff;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 2.8rem;
        // border: 1px solid red;
        .title {
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 0.22rem;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 0.1rem;
        }
      }
      .right {
        // border: 1px solid red;
        width: 0.6rem;
        .rightImg {
          display: block;
          width: 0.55rem;
          height: 0.55rem;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 0.16rem;
    margin-top: 0.1rem;
    .title {
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 0.03rem;
        height: 0.14rem;
        background: #1890ff;
      }
      .content {
        width: 0.63rem;
        height: 0.16rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 0.22rem;
        margin-left: 0.1rem;
      }
    }
    .content {
      .row {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 0.16rem;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          width: 2.5rem;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.1rem;
        }
        .rt-column {
          width: 2.55rem;
          //   height: 2.55rem;
          margin-left: 0.2rem;
          .rt-title {
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 0.16rem;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.23rem;
            .column {
              //    border: 1px solid red;
              width: 1.5rem;
              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
              }
              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
      color: #ffffff;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.contentBox {
  margin-top: 1.38rem;
}

.otherMargin {
  height: 0.1rem;
  background: #f5f5f5;
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0.16rem 0.16rem 0 0.06rem;
}
.ExamineBottom {
  height: 0.5rem;
}
.status {
  display: inline-block;
  margin-top: 0.16rem;
  padding: 0.03rem 0.08rem;
  background: #edf6ff;
  border-radius: 0.02rem;
  font-size: 0.11rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3774ac;
}
</style>
